<template>
	<view class="">
		<map style="width: 100%; height: 85vh" @markertap="markertap" :latitude="latitude" :longitude="longitude" :markers="covers"></map>

		<u-popup :show="mapShow" mode="center" @close="mapClose" @open="mapOpen">
			<view class="mapShow_Style">
				<view style="text-align: center; margin-bottom: 20rpx">{{ storeTownship.storeName || '- -' }}</view>
				<view>联系人: {{ storeTownship.contactBy || '- -' }}</view>
				<view>联系电话: {{ storeTownship.contactTel || '- -' }}</view>
				<!-- <view>物资数量: 666件</view> -->
				<view>物资类型: {{ storeTownship.storeTypeCode_dictText || '- -' }}</view>
				<view @click="handleMarkerAction" style="text-align: center; color: #e1cdad; margin-top: 20rpx">点击查看详情</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getStoreLinfo } from '@/api/mappages/materials/materials.js';
export default {
	name: 'map',
	props: {
		message: {
			type: String,
			default: 'Hello from MyComponent'
		}
	},
	data() {
		return {
			mapShow: false,
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 28.25023,
			longitude: 113.07685,
			covers: [],
			storeTownship: '',
		};
	},
	mounted() {
		this.ok();
	},
	methods: {
		async ok() {
			let arr = await getStoreLinfo();
			console.log(this.longitude, this.latitude);
			this.covers = arr.result.records.map((r) => {
				return {
					id: r.id,
					latitude: r.storeLat,
					longitude: r.storeLong,
					iconPath: '../../static/map/marker.png',
					winth: '40',
					height: '40',
					...r
				};
			});
		},
		markertap(e) {
			const markerId = e.detail.markerId;
			const marker = this.covers.find((m) => m.id == markerId);
			this.storeTownship = marker
			console.log(this.storeTownship,'this.storeTownship')
			if (marker) {
				this.mapShow = true;
			}
		},
		handleMarkerAction() {
			this.mapShow = false;
			// 这里可以添加你想要执行的操作
			this.$tab.navigateTo(`/mappages/materials/materialsReport/report?item=${this.storeTownship.id}`);
		},
		mapClose() {
			this.mapShow = false;
		},
		mapOpen() {}
	},
	onLoad(options) {
	
	}
};
</script>

<style scoped lang="scss">
/deep/ .u-popup__content {
	border-radius: 40rpx;
	padding: 40rpx;
	background: rgba(174, 174, 174, 0.5);
	z-index: 99999999;
}
/deep/ .u-transition {
	z-index: 99999999 !important;
}
.mapShow_Style {
	color: #fff;
	font-weight: bold;
}
.mapShow_Style view {
	margin: 5rpx;
}
</style>
